<template>
  <div class="contribute-container">
    <div class="chart-wrapper">
      <div style="display: flex">
        <span class="ib spantitle">{{
          depName ? depName + "的投稿积分详情" : "请选择单位查询"
        }}</span>
      </div>
      <el-divider></el-divider>
      <el-form
        :model="queryParams"
        size="small"
        ref="queryForm"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="单位名称">
          <el-select
            v-model="queryParams.companyName"
            placeholder="请筛选单位名称"
            filterable
            @change="queryFalg = true"
          >
            <el-option
              v-for="(item, k) in depData"
              :key="k"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起始时间">
          <el-date-picker
            v-model="queryParams.startTime"
            type="date"
            placeholder="选择月"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            @change="queryFalg = true"
            :picker-options="{
              disabledDate(time) {
                return time.getTime() >= Date.now();
              },
            }"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="queryParams.endTime"
            type="date"
            placeholder="选择月"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            @change="queryFalg = true"
            :picker-options="{
              disabledDate(time) {
                return time.getTime() >= Date.now();
              },
            }"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item style="marginleft: 20px">
          <el-button type="primary" icon="el-icon-search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :lg="24" class="mb20">
          <table style="width: 100%" cellspacing="0" cellpadding="0" border="1">
            <tr style="height: 40px">
              <th>图片新闻</th>
              <th>公司要问</th>
              <th>基层动态</th>
              <th>本部要闻</th>
              <th>长供故事汇</th>
              <th>长供家园</th>
              <th>媒体报道</th>
            </tr>
            <tr style="height: 40px">
              <td>{{ this.depDatail.tpxwScore }}</td>
              <td>{{ this.depDatail.gsywScore }}</td>
              <td>{{ this.depDatail.jcdtScore }}</td>
              <td>{{ this.depDatail.bbywScore }}</td>
              <td>{{ this.depDatail.gshScore }}</td>
              <td>{{ this.depDatail.jyScore }}</td>
              <td>{{ this.depDatail.mtbdEntity.score }}</td>
            </tr>
          </table>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="mb20">
          <Chart ref="options12" :options="options12" :height="'250px'"></Chart>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="mb20">
          <!-- <Chart ref="options13" :options="options13" :height="'250px'"></Chart> -->

          <div
            style="
              text-align: center;
              font-size: 16px;
              font-weight: bold;
              height: 40px;
              line-height: 40px;
            "
          >
            按单位统计媒体报道
          </div>
          <el-table :data="depDatail.mtbdEntity.alist" style="width: 100%">
            <el-table-column
              prop="mediumTime"
              label="发稿日期"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="header" label="稿件名称" align="center">
            </el-table-column>
            <el-table-column label="媒体" align="center">
              <el-table-column prop="medium" label="媒体名称" align="center">
              </el-table-column>
              <el-table-column prop="mtlx" label="类别" align="center">
              </el-table-column>
            </el-table-column>

            <el-table-column
              prop="banmian"
              label="版面"
              width="140"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="deptName"
              label="单位"
              width="140"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="author1"
              label="作者"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="jifen"
              label="积分"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="tgbz" label="备注"> </el-table-column>
          </el-table>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="24" class="mb20">
          <Chart ref="options13" :options="options13" :height="'250px'"></Chart>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Chart from "./chart.vue";

import {
  customizeDepNameDetail,
  customizedeptList,
} from "@/api/extendApplication/contribute";
export default {
  name: "DepDetail",

  data() {
    return {
      queryFalg: false,
      depName: "",
      queryParams: {
        startTime: "",
        endTime: "",
        companyName: "",
      },
      depData: [],
      options12: {},
      options13: {},
      depDatail: {
        mtbdEntity: { alist: [] },
      },

      loading: false,
    };
  },

  components: { Chart },

  computed: {},
  watch: {
    depName(a, b) {
      console.log("a,b: ", a, b);
    },
  },

  mounted() {
    this.getDepList();
    // this.chart12();
    // this.chart13();
    this.depName = sessionStorage.getItem("cz-depName");
    let date = new Date();

    this.queryParams.startTime = `${date.getFullYear()}-${
      date.getMonth() + 1
    }-01`;
    this.queryParams.endTime = `${date.getFullYear()}-${
      date.getMonth() + 1
    }-${date.getDate()}`;
    if (this.depName) {
      this.queryParams.companyName = this.depName;
    }
    this.getDetail();
  },

  watch: {
    value: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
  },

  methods: {
    getDepList() {
      customizedeptList().then((res) => {
        this.depData = res.data;
      });
    },
    getDetail() {
      // this.queryParams.startTime = "2021-01-01";
      // this.queryParams.endTime = "2023-12-28";
      // this.queryParams.companyName = "电力调度控制中心";
      // 城区供电中心

      console.log("this.queryParams: ", this.queryParams);
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      customizeDepNameDetail(this.queryParams).then((res) => {
        console.log("res: ", res);
        this.depDatail = res.data;
        this.depName = this.queryParams.companyName;
        this.$nextTick(() => {
          this.chart12();
          this.chart13();
          this.loading.close();
          this.queryFalg = false;
        });
      });
    },
    handleQuery() {
      if (!this.queryFalg) return;
      this.getDetail();
    },
    goBack() {
      this.$emit("update:componentsName", "");
    },
    chart12() {
      let legendData = ["积分"];
      let xData = [
        "图片新闻",
        "公司要问",
        "基层动态",
        "本部要闻",
        "长供故事汇",
        "长供家园",
        // "媒体报道",
      ];
      let yData = [
        this.depDatail.tpxwScore,
        this.depDatail.gsywScore,
        this.depDatail.jcdtScore,
        this.depDatail.bbywScore,
        this.depDatail.gshScore,
        this.depDatail.jyScore,
        // this.depDatail.mtbdEntity.score,
      ];

      this.options12 = {
        title: {
          show: true,
          text: this.depName + " 六大板块积分柱状图",
          left: "center",
          // top: 10,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          data: legendData,
          right: "0",
          // top: 10,
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
          },
          data: xData,
        },
        yAxis: {
          type: "value",
          show: true,
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ddd",
            },
          },
        },
        series: [
          {
            type: "bar",
            name: "积分",
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              color: "#1e80ff",
            },
            data: yData,
          },
        ],
      };
    },
    chart13() {
      let legendData = ["积分"];
      let xData = ["媒体报道"];
      let yData = [this.depDatail.mtbdEntity.score];
      this.options13 = {
        title: {
          show: true,
          text: this.depName + " 媒体报道积分柱状图",
          left: "center",
          // top: 10,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          data: legendData,
          right: "0",
          // top: 10,
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
          },
          data: xData,
        },
        yAxis: {
          type: "value",
          show: true,
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ddd",
            },
          },
        },
        series: [
          {
            type: "bar",
            name: "积分",
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              color: "#1e80ff",
            },
            data: yData,
          },
        ],
      };
    },
  },
};
</script>

<style scoped lang="scss">
th,
td {
  text-align: center;
}

.chart-wrapper {
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 32px;
  margin-bottom: 10px;
  .spantitle {
    height: 30px;
    line-height: 30px;
    font-weight: 700;
    font-size: 16px;
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
